<template lang="html">
  <div class="mine-index">
    <ul class="mine-list">
      <router-link tag="li" to='/localmusic'>
        <img class='list-img' src="../../../../static/img/mine-index_music.png" alt="">
        <p>本地音乐 <span>(232)</span> </p>
        <img class="list-next" src="../../../../static/img/mine-index_next.png" alt="">
      </router-link>
      <router-link tag="li" to=''>
        <img class='list-img' src="../../../../static/img/mine-index_download.png" alt="">
        <p>下载管理 <span>(232)</span> </p>
        <img class="list-next" src="../../../../static/img/mine-index_next.png" alt="">
      </router-link>
      <router-link tag="li" to='/minehistory'>
        <img class='list-img' src="../../../../static/img/mine-index_history.png" alt="">
        <p>历史记录 <span>({{this.historySongs.length}})</span> </p>
        <img class="list-next" src="../../../../static/img/mine-index_next.png" alt="">
      </router-link>
      <router-link tag="li" to='/minecollect'>
        <img class='list-img' src="../../../../static/img/mine-index_collect.png" alt="">
        <p>我的收藏 <span>(232)</span> </p>
        <img class="list-next" src="../../../../static/img/mine-index_next.png" alt="">
      </router-link>
      <router-link tag="li" to=''>
        <img class='list-img' src="../../../../static/img/mine-index_radio.png" alt="">
        <p>我的电台 <span>(232)</span> </p>
        <img class="list-next" src="../../../../static/img/mine-index_next.png" alt="">
      </router-link>
      <router-link tag="li" to=''>
        <img class='list-img' src="../../../../static/img/mine-index_publish.png" alt="">
        <p>发表动态 <span>(232)</span> </p>
        <img class="list-next" src="../../../../static/img/mine-index_next.png" alt="">
      </router-link>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: "IndexList",
  data () {
    return{}
  },
  mounted () {
    console.log(this.historySongs)
  },
  computed: {
    ...mapState(['historySongs'])
  }
}
</script>

<style lang="less" scoped>
.mine-list{
  width: 100%;
  height: 516/100rem;
  background-color: #fff;
}
.mine-list li{
  width: 100%;
  border-bottom: 1/100rem solid #ccc;
  height: 85/100rem;
  float: left;
}
.mine-list li:last-child{
  border-bottom: none;
}
.list-img{
  height: 40/100rem;
  margin: 20/100rem 20/100rem 12/100rem;
  float: left;
}
p{
  width: 250/100rem;
  font-size: 30/100rem;
  color:#333;
  line-height: 85/100rem;
  float: left;
}
span{
  font-size: 24/100rem;
  color:#666;
}
.list-next{
  height: 30/100rem;
  float: right;
  margin-top: 30/100rem;
  margin-right: 20/100rem;
}
</style>
